<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <z-table
      ref="table"
      rowKey="key"
      :showAlert="false"
      :showSelection="false"
      :showPagination="false"
      :loading="loading"
      :columns="columns"
      :dataSource="pageData"
    />
  </j-modal>
</template>

<script>
export default {
  data() {
    return {
      width: 500,
      visible: false,
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 60,
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '手机号',
          align: 'center',
          dataIndex: 'phone'
        }
      ],
      title: '',
      pageData: []
    }
  },
  created() {},
  methods: {
    show(str1, str2) {
      this.title = str1
      this.visible = true
      this.pageData = []
      str2.forEach((item, i) => {
        this.pageData.push({
          key: i,
          phone: item
        })
      })
    },
    handleOk() {
      this.handleCancel()
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.fyb {
  /deep/.ant-col-sm-16 {
    margin-left: 12%;
  }
}
</style>
